<template>
  <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 transition-all duration-300">
    <div class="flex items-center justify-between mb-4">
      <h3 class="font-semibold text-slate-800 flex items-center">
        <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center mr-3">
          <i class="fas fa-search text-green-600"></i>
        </div>
        {{ panel.title || '需求分析结果' }}
      </h3>
      <div class="flex items-center space-x-2">
        <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">步骤 1</span>
        <span class="text-xs text-slate-400">{{ formatTime(panel.timestamp) }}</span>
      </div>
    </div>
    
    <div class="space-y-4">
      <!-- 解析结果 -->
      <div class="bg-green-50 p-4 rounded-lg">
        <h4 class="font-medium text-green-800 mb-3">解析结果</h4>
        <div class="text-sm text-green-700 space-y-2">
          <div class="flex items-start">
            <span class="text-green-500 mr-2">✓</span>
            <span>问题类型：{{ getProblemType() }}</span>
          </div>
          <div class="flex items-start">
            <span class="text-green-500 mr-2">✓</span>
            <span>查询对象：{{ getQueryObject() }}</span>
          </div>
          <div class="flex items-start">
            <span class="text-green-500 mr-2">✓</span>
            <span>信息深度：{{ getInfoDepth() }}</span>
          </div>
          <div class="flex items-start">
            <span class="text-green-500 mr-2">✓</span>
            <span>输出格式：{{ getOutputFormat() }}</span>
          </div>
        </div>
      </div>
      
      <!-- 关键实体识别 -->
      <div class="bg-blue-50 p-4 rounded-lg">
        <h4 class="font-medium text-blue-800 mb-3">关键实体识别</h4>
        <div class="text-sm text-blue-700">
          <div class="flex flex-wrap gap-2">
            <span 
              v-for="entity in getKeyEntities()" 
              :key="entity"
              class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium"
            >
              {{ entity }}
            </span>
          </div>
        </div>
      </div>
      
      <!-- 处理建议 -->
      <div class="bg-purple-50 p-4 rounded-lg">
        <h4 class="font-medium text-purple-800 mb-3">处理建议</h4>
        <div class="text-sm text-purple-700 space-y-2">
          <div class="flex items-start">
            <span class="text-purple-500 mr-2">•</span>
            <span>建议使用{{ getRecommendedMethod() }}进行分析</span>
          </div>
          <div class="flex items-start">
            <span class="text-purple-500 mr-2">•</span>
            <span>需要关注{{ getFocusArea() }}</span>
          </div>
          <div class="flex items-start">
            <span class="text-purple-500 mr-2">•</span>
            <span>预计处理时间：{{ getEstimatedTime() }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ResultPanel } from '../../types/home'

interface Props {
  panel: ResultPanel
  conversationType: string
}

const props = defineProps<Props>()

// 格式化时间
const formatTime = (timestamp: Date | string) => {
  return new Date(timestamp).toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

// 根据对话类型获取问题类型
const getProblemType = () => {
  const types = {
    data: '环境监测数据查询',
    knowledge: '环境监测专业知识查询',
    image: '图像识别分析',
    code: '代码分析'
  }
  return types[props.conversationType as keyof typeof types] || '通用问题查询'
}

// 获取查询对象
const getQueryObject = () => {
  const objects = {
    data: '深圳AQI趋势分析',
    knowledge: '深圳监测站铜分析方法',
    image: '图像内容识别',
    code: '代码质量分析'
  }
  return objects[props.conversationType as keyof typeof objects] || '相关对象'
}

// 获取信息深度
const getInfoDepth = () => {
  return '需要详细的数据分析'
}

// 获取输出格式
const getOutputFormat = () => {
  const formats = {
    data: '趋势图表和统计报告',
    knowledge: '结构化方法列表',
    image: '图像分析报告',
    code: '代码分析报告'
  }
  return formats[props.conversationType as keyof typeof formats] || '结构化报告'
}

// 获取关键实体
const getKeyEntities = () => {
  const entities = {
    data: ['深圳', 'AQI', '趋势分析', '30天'],
    knowledge: ['深圳监测站', '地表水', '铜', '分析方法'],
    image: ['图像', '特征提取', '模式识别'],
    code: ['代码', '性能分析', '优化建议']
  }
  return entities[props.conversationType as keyof typeof entities] || ['实体1', '实体2', '实体3']
}

// 获取推荐方法
const getRecommendedMethod = () => {
  const methods = {
    data: '时间序列分析',
    knowledge: '知识图谱检索',
    image: '深度学习模型',
    code: '静态代码分析'
  }
  return methods[props.conversationType as keyof typeof methods] || '智能分析方法'
}

// 获取关注重点
const getFocusArea = () => {
  const areas = {
    data: '数据质量和异常值',
    knowledge: '标准依据和技术参数',
    image: '图像特征和准确性',
    code: '代码结构和性能'
  }
  return areas[props.conversationType as keyof typeof areas] || '关键指标'
}

// 获取预计处理时间
const getEstimatedTime = () => {
  return '2-3分钟'
}
</script>

<style scoped>
.bg-green-50 {
  background-color: rgba(34, 197, 94, 0.1);
}

.bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1);
}

.bg-purple-50 {
  background-color: rgba(147, 51, 234, 0.1);
}

.bg-green-100 {
  background-color: rgba(34, 197, 94, 0.2);
}

.bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2);
}

.bg-purple-100 {
  background-color: rgba(147, 51, 234, 0.2);
}

.text-green-500 {
  color: rgb(34, 197, 94);
}

.text-blue-500 {
  color: rgb(59, 130, 246);
}

.text-purple-500 {
  color: rgb(147, 51, 234);
}

.text-green-600 {
  color: rgb(22, 163, 74);
}

.text-blue-600 {
  color: rgb(37, 99, 235);
}

.text-purple-600 {
  color: rgb(126, 34, 206);
}

.text-green-700 {
  color: rgb(21, 128, 61);
}

.text-blue-700 {
  color: rgb(29, 78, 216);
}

.text-purple-700 {
  color: rgb(109, 40, 217);
}

.text-green-800 {
  color: rgb(20, 83, 45);
}

.text-blue-800 {
  color: rgb(30, 64, 175);
}

.text-purple-800 {
  color: rgb(91, 33, 182);
}
</style>